<template>
  <div>
    <el-card class="box-card clearfix">
      <el-radio-group v-model="radio" size="large" class="radio">
        <el-radio-button label="已上架" value="shelved" @click="getShelvedProducts" />
        <el-radio-button label="未上架" value="unshelved" @click="getUnShelvedProducts" />
      </el-radio-group>
      <el-table style="margin: 10px 0px" border :data="trademarkArr" stripe height="540">
        <!-- 2.1.每一列：type（显示索引）、默认使用div展示数据，要改变可以用插槽 -->
        <el-table-column label="序号" width="80px" align="center" type="index" />
        <el-table-column label="品名" prop="name" />
        <el-table-column label="图片">
          <template #="{ row, $index }">
            <img :src="row.image" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="进价" prop="price" />
        <el-table-column label="标价" prop="shelfPrice" />

        <el-table-column label="操作">
          <template #="{ row, $index }">
            <el-button
              v-if="row.shelfPrice"
              type="primary"
              size="small"
              icon="Edit"
              @click="updatePrice(row)"
            />
            <el-button
              v-if="!row.shelfPrice"
              type="primary"
              size="small"
              icon="Upload"
              @click="shelfPro(row)"
            />
            <el-button
              v-if="row.shelfPrice"
              type="primary"
              size="small"
              icon="Download"
              @click="removePro(row.shelfId)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialogFormVisible">
      <el-form style="width: 80%" :model="trademarkParams" ref="formRef">
        <el-form-item label="新标价" label-width="100px" prop="shelfPrice">
          <el-input placeholder="新标价" v-model="trademarkParams.shelfPrice" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" size="default" @click="cancel">取消</el-button>
        <el-button type="primary" size="default" @click="confirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, onMounted, reactive, nextTick, watch } from 'vue'
import {
  allBrandProducts,
  shelvedProducts,
  shelfProduct,
  removeProduct,
  updateShelvedPrice,
} from '@/api/borrow/index'

const formRef = ref()
const radio = ref('shelved')
const trademarkArr = ref([])
const dialogFormVisible = ref<boolean>(false)
//对话框取消
const cancel = () => {
  dialogFormVisible.value = false
}

//组件挂载：获取第一页数据
onMounted(() => {
  getShelvedProducts()
})

const trademarkParams = reactive({
  productId: '',
  shelfId: '',
  shelfPrice: 0,
})

const getShelvedProducts = async () => {
  const result: any = await shelvedProducts()
  if (result.code == 200) {
    trademarkArr.value = result.data
  }
}

const getUnShelvedProducts = async () => {
  const result1: any = await shelvedProducts()
  const result2: any = await allBrandProducts()
  const all: any = result2.data
  const shelf: any = result1.data
  const shelvedProductIds = new Set(shelf.map((item) => item.productId))
  const unshelvedProducts = all.filter((item) => !shelvedProductIds.has(item.productId))
  trademarkArr.value = unshelvedProducts
}

const updatePrice = (row) => {
  dialogFormVisible.value = true
  trademarkParams.shelfId = row.shelfId
  trademarkParams.shelfPrice = row.shelfPrice
}

const shelfPro = (row) => {
  dialogFormVisible.value = true
  trademarkParams.productId = row.productId
  trademarkParams.shelfPrice = 0
}

//对话框确认：校验表单、操作成功/失败关闭对话框发出提示
const confirm = async () => {
  if (trademarkParams.shelfId == '') {
    const result: any = await shelfProduct({
      productId: trademarkParams.productId,
      shelfPrice: trademarkParams.shelfPrice,
    })
    if (result.code == 200) {
      dialogFormVisible.value = false
      ElMessage({
        type: 'success',
        message: '上架成功',
      })
      getShelvedProducts()
      getUnShelvedProducts()
      trademarkParams.productId = ''
      trademarkParams.shelfId = ''
      trademarkParams.shelfPrice = 0
    } else {
      ElMessage({
        type: 'error',
        message: '上架失败',
      })
      trademarkParams.productId = ''
      trademarkParams.shelfId = ''
      trademarkParams.shelfPrice = 0
      dialogFormVisible.value = false
    }
  } else {
    const result: any = await updateShelvedPrice(trademarkParams.shelfId, {
      newPrice: trademarkParams.shelfPrice,
    })
    if (result.code == 200) {
      dialogFormVisible.value = false
      ElMessage({
        type: 'success',
        message: '标价更改成功',
      })
      getShelvedProducts()
      getUnShelvedProducts()
      trademarkParams.productId = ''
      trademarkParams.shelfId = ''
      trademarkParams.shelfPrice = 0
    } else {
      ElMessage({
        type: 'error',
        message: '标价更改失败',
      })
      trademarkParams.productId = ''
      trademarkParams.shelfId = ''
      trademarkParams.shelfPrice = 0
      dialogFormVisible.value = false
    }
  }
}

const removePro = async (id: number) => {
  const temp = id + ''
  const result: any = await removeProduct(temp)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '下架成功',
    })
    getShelvedProducts()
  } else {
    ElMessage({
      type: 'error',
      message: '下架失败',
    })
  }
}
</script>
<style lang="scss" scoped>
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.box-card {
  margin: 30px 0px;
  .radio {
    float: right;
    margin: 0 0 10px 0;
  }
}
</style>
